<template>
  <div>
    <!-- 面包屑   -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a>动物管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>动物发布</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片    -->
    <el-card class="box-card">
      <!-- 表单 -->
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题名称">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="栏目类型">
          <el-radio-group v-model="ruleForm.typeId">
            <el-radio :label="i.typeId" v-for="i in typeList" :key="i.typeId"
              >{{ i.remarks }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="内容">
          <VueEditor :config="config" ref="vueEditor" />
        </el-form-item>

        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            :action="baseURL + '/upload'"
            :before-upload="handlebeforeUpload"
            list-type="picture-card"
            :on-success="handleAvatarSuccess"
            :on-exceed="Avatarexpceed"
            :on-remove="Avatareremove"
            :limit="3"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="视频">
          <el-upload
            class="upload-demo"
            :action="baseURL + '/upload'"
            :on-success="handlevideoSuccess"
            :on-remove="videoremove"
            :before-upload="videolebeforeUpload"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传视频文件且只允许上传一个
            </div>
          </el-upload>
        </el-form-item>

        <el-button type="primary" @click="submitForm">发布动物</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { adddAnimal, getType } from '@/api';
import VueEditor from 'vue-word-editor';
import 'quill/dist/quill.snow.css';
import axios from '@/units/request.js';
export default {
  data() {
    return {
      typeList: [],
      baseURL: axios.defaults.baseURL,
      //form表单数据
      ruleForm: {
        title: '',
        typeId: 0,
        detail: '',
        img: [],
        video: '',
      },
      //富文本数据
      config: {
        // 上传图片的配置
        uploadImage: {
          url: axios.defaults.baseURL + '/upload',
          name: 'file',
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            insert(axios.defaults.baseURL + res.data.data);
          },
        },
      },
    };
  },
  methods: {
    //提交事件
    async submitForm() {
      this.ruleForm.detail = this.$refs.vueEditor.editor.root.innerHTML;

      if (!this.ruleForm.title) {
        this.$message.warning('标题不能为空');
        return;
      }
      let length = this.$refs.vueEditor.editor.getLength();
      if (length == 1) {
        this.$message.warning('detail内容不能为空!');
        return;
      }
      if (!this.ruleForm.typeId) {
        this.$message.warning('请选择类型哦!');
        return;
      }

      if (this.ruleForm.img.length == 0) {
        this.$message.warning('请上传封面头像!');
        return;
      }
      const res = await adddAnimal(this.ruleForm);
      if (res.data.code === 1) {
        this.ruleForm = {
          title: '',
          typeId: 0,
          detail: '',
          img: [],
          video: '',
        };
        this.$message.success(res.data.msg);
        this.$router.push({ path: '/layout/animallist' });
      } else {
        this.$message.warning(res.data.msg);
      }
    },

    //以下是上传封面事件
    handleAvatarSuccess(res, file) {
      if (res.code === 1) {
        this.ruleForm.img.push(res.data);
      } else {
        this.$message({
          message: res.msg,
          type: 'warning',
        });
      }
    },
    handlebeforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      let imageReg = file.type.indexOf('image/') === -1;
      const isJPG = imageReg;
      if (imageReg) {
        this.$message.error('请上传图片哦！');
      }
      if (!isLt2M) {
        this.$message.error('上传大小不能超过 2MB!');
      }
      return !isJPG && isLt2M;
    },
    Avatareremove(file, fileList) {
      this.ruleForm.img = fileList;
    },
    Avatarexpceed() {
      this.$message({
        message: '最多只能上传三张!',
        type: 'warning',
      });
    },
    //以下是视频上传事件
    videoremove(file, fileList) {
      this.ruleForm.img = fileList;
    },
    videorexpceed() {
      this.$message.warning('视频只能上传一个!');
    },
    handlevideoSuccess(res, file) {
      if (res.code === 1) {
        this.ruleForm.video = res.data;
      } else {
        this.$message({
          message: res.msg,
          type: 'warning',
        });
      }
    },
    videolebeforeUpload(file) {
      let videoReg = file.type.indexOf('video/') === -1;
      if (videoReg) {
        this.$message.error('请上传视频哦！');
      }

      return !videoReg;
    },
  },
  //在钩子函数中获取所有的栏目
  async created() {
    const { data } = await getType();
    this.typeList = data.list;
  },

  components: {
    VueEditor,
  },
};
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
